<template>
    <div class="payment-page">
      <div class="card">
          <div class="card-header">
          <div>绿色通道申请</div>

          </div>
          <div class="card-body">
              <!-- 告知书部分 -->
              <div class="notice">
                  <h3 style="text-align: center">系统告知书</h3>
                  <p>尊敬的同学：</p>
                  <p>您好！</p>
                  <p>为了确保您能够顺利申请绿色通道，请您仔细阅读以下告知内容，并按照要求进行操作：</p>
                  <h4>一、绿色通道申请条件</h4>
                  <ol>
                      <li>家庭经济困难，无法按时缴纳学费的学生；</li>
                      <li>遭遇突发事件，导致经济状况急剧恶化的学生；</li>
                      <li>其他特殊原因导致经济困难的学生。</li>
                  </ol>
                  <h4>二、申请所需材料</h4>
                  <ul>
                      <li>绿色通道申请表（请在系统中下载并填写）；</li>
                      <li>家庭经济困难证明（如低保证、贫困证明等）；</li>
                      <li>本人身份证复印件；</li>
                      <li>学生证复印件；</li>
                      <li>其他能够证明经济困难的材料。</li>
                  </ul>
                  <h4>三、申请流程</h4>
                  <ol>
                      <li>登录学校官方网站或绿色通道申请系统；</li>
                      <li>下载并填写《绿色通道申请表》；</li>
                      <li>准备所需材料的电子版并上传至系统；</li>
                      <li>提交申请后，系统将自动生成申请编号，请妥善保存；</li>
                      <li>等待审核结果，审核期间请保持联系方式畅通，以便及时接收通知。</li>
                  </ol>
                  <h4>四、审核与结果通知</h4>
                  <ol>
                      <li>申请提交后，学校将组织相关部门进行审核；</li>
                      <li>审核过程中，如需补充材料或信息，工作人员将通过电话或邮件联系您；</li>
                      <li>审核结果将在提交申请后的10个工作日内通过系统通知，请登录系统查看。</li>
                  </ol>
                  <h4>五、重要提醒</h4>
                  <ul>
                      <li>请确保提交的材料真实、完整，如有虚假，申请将被取消，且将依规处理；</li>
                      <li>绿色通道申请成功后，请按照通知要求办理相关手续；</li>
                      <li>如有疑问，请及时联系学校绿色通道办公室，电话：XXX-XXXXXXX，邮箱：greentunnel@school.edu。</li>
                  </ul>
                  <p>感谢您的配合！</p>
                  <p>祝学习愉快！</p>
              </div>
              <div style="text-align: center">
                  <button  @click="changeGreen">申请</button>
              </div>
          </div>
      </div>
    </div>
</template>


<style scoped>
.payment-page {
    padding: 20px;
    background-color: #f9f9f9;
}

.card {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 8px;
}

.card-header {
    background-color: #409eff;
    color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

button {
    padding: 10px 20px;
    background-color: #409eff;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}
button:hover {
    background-color: #66b1ff;
}
</style>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";
export default {
    name: 'greenChannel',
    data(){
        return{
            //id
            stu_ID: 15,
            error: '', // 确保定义 error 属性
        };
    },
    methods:{
        changeGreen(){
            const cgGreen = {
                stu_ID: this.stu_ID
            }
            request.post("/regis/green", cgGreen)
              .then(res => {
                  console.log(res.data);
                  Message.success({
                      message: '申请成功',
                      duration: 3000
                  });
              })
                .catch(err => {
                    this.showError('操作失败，请稍后再试'); // 显示具体错误信息
                    console.error("Network error:", err); // 处理网络错误
                });
        },
        showError(str){
            // 触发错误提示
            Message.error({
                message: str,
                duration: 3000 // 持续时间为3000毫秒（3秒）
            });
        },
    }
};
</script>
